<template>
  <div style="height:100%;width:100%">
    <el-row class="mainContent" >
      <!--工具条-->
      <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
        <el-form :inline="true" size="small" style="text-align:left;" >
          <el-form-item  label="用户ID">
            <el-input v-model="$route.query.id" disabled></el-input>
          </el-form-item>
          <el-form-item  label="昵称">
            <el-input v-model="$route.query.name" disabled></el-input>
          </el-form-item>
          <el-form-item label="用户">
            <el-input v-model="$route.query.realname" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号">
            <el-input v-model="$route.query.mobile" disabled></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-form :inline="true" :model="filters" size="small" style="text-align:left;" :rules="filte" ref="filters">
        <el-form-item prop="serialnumber">
          <el-input v-model="filters.serialnumber" placeholder="流水号" clearable></el-input>
        </el-form-item>
        <el-form-item prop="type">
          <el-select v-model="filters.type" placeholder="类别" clearable>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <div class="block">
            <el-date-picker
              v-model="filters.begtime"
              type="datetime"
              placeholder="选择日期">
            </el-date-picker>
            <el-date-picker
              v-model="filters.endtime"
              type="datetime"
              placeholder="选择日期">
            </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="getUsers">查询</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <el-table :data="users" highlight-current-row  v-loading="listLoading" style="width: 100%;">
        <el-table-column prop="time" label="扣费时间" >
        </el-table-column>
        <el-table-column prop="serialnumber" label="流水号" >
        </el-table-column>
        <el-table-column  label="发生金额" prop="amount" >
        </el-table-column>
        <el-table-column  label="发生后余额"  prop="amountBalance">
        </el-table-column>
        <el-table-column  label="类别" >
          <template slot-scope="scope">
            {{scope.row.type | typeFormat}}
          </template>
        </el-table-column>
        <el-table-column  label="状态"  >
          <template slot-scope="scope">
            {{scope.row.state | stateFormat}}
          </template>
        </el-table-column>
      </el-table>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10"  :total="total" style="float:right;">
      </el-pagination>
    </el-row>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        options: [{
          value: '101',
          label: '收入'
        }, {
          value: '102',
          label: '支出 '
        }, {
          value: '103',
          label: '冻结'
        },{
          value: '104',
          label: '解冻'
        }],
        page:1,
        total:0,
        filters:{
          begtime:'',
          endtime:''
        },
        filte:{},
        listLoading:false
      };
    },
    filters:{
      stateFormat(val){
        switch (val){
          case 10:
            return '异常';
            break
          case 11:
            return '正常';
            break
        }
      },
      typeFormat(val){
        switch (val){
          case 101:
            return '收入';
            break
          case 102:
            return '支出';
            break
          case 103:
            return '冻结';
            break
          case 104:
            return '解冻';
            break
        }
      }
    },
    created() {
      this.getUsers();
    },
    methods: {
      getUsers() {
        this.users = []
        this.listLoading = true;
        var obj = {
          data:{
            userid:this.$route.query.id,
            serialnumber:this.filters.serialnumber,
            type:this.filters.type,
            begtime:this.filters.begtime==''||this.filters.begtime==0||this.filters.begtime==null?'':Math.round(new Date(this.filters.begtime).getTime()/1000),
            endtime:this.filters.endtime==''||this.filters.endtime==0||this.filters.endtime==null?'':Math.round(new Date(this.filters.endtime).getTime()/1000),
            pageNo:this.page
          }
        };
        this.$http('sys/user/financeList.do',obj).then(resp => {
          if(resp.code==1){
            this.users = resp.data.list;
            this.total = resp.data.total;
            this.listLoading = false;
          }

        });
      },
      handleCurrentChange(val) {
        this.page = val;
        this.getUsers();
      },


    }
  };
</script>

<style scoped>


  .el-table:hover{
    cursor: pointer !important;
  }
</style>
